<template>
<div class="part-box">
  <el-form
    ref="mainForm"
    :model="formData"
    :rules="rules"
    size="mini"
    label-width="100px"
    class="editForm"
  >
    <el-row class="operation-button">
      <el-button class="filter-item right-btn" type="primary" @click="saveData()">提交</el-button>
    </el-row>
    <el-row>
      <el-col :span="6">
        <el-form-item label="业务编号" required class="car-form-item">
            <el-input v-model="orders.orderId" class="car-modal-col" disabled placeholder="请输入" />
        </el-form-item>
        <el-form-item label="查证银行" required class="car-form-item">
          <el-select v-model="mainUser.checkBank" disabled placeholder="请选择" style="width:100%" clearable class="car-modal-col">
            <el-option
              v-for="item in banks"
              :key="item.id"
              :label="item.bankName"
              :value="item.id+''"
            />
          </el-select></el-form-item>
        <el-form-item label="放款金额" required class="car-form-item">
          <el-input type="number" v-model="loanAmount" class="car-modal-col" placeholder="请输入" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="客户姓名" required class="car-form-item">
          <el-input v-model="mainUser.customerName" class="car-modal-col" disabled placeholder="请输入" />
        </el-form-item>
        <el-form-item label="业务部门" required class="car-form-item">
          <el-input v-model="orders.serviceGroup" class="car-modal-col" disabled placeholder="请输入" />
        </el-form-item>
        <el-form-item label="还款卡号" required class="car-form-item">
          <el-input v-model="formData.bankNum" class="car-modal-col" placeholder="请输入" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="证件类型" required class="car-form-item">
          <el-input v-model="mainUser.certType" class="car-modal-col" disabled placeholder="请输入" />
        </el-form-item>
        <el-form-item label="业务员" required class="car-form-item">
          <el-input v-model="orders.serviceUser" class="car-modal-col" disabled placeholder="请输入" />
        </el-form-item>
        <el-form-item label="垫资日期" required class="car-form-item">
          <el-input type="date" v-model="formData.certificationType" class="car-modal-col" placeholder="请输入" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="证件号码" required class="car-form-item">
          <el-input v-model="mainUser.certNum" class="car-modal-col" disabled placeholder="请输入" />
        </el-form-item>
        <el-form-item label="银行放款日期" prop="loanTime" class="car-form-item">
          <el-input type="date" v-model="formData.loanTime" class="car-modal-col" placeholder="请输入" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="18">
        <el-form-item label="备注" prop="remark" class="car-form-item">
          <el-input v-model="formData.remark" class="car-modal-col"  placeholder="请输入" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="结清日志" prop="nickName" class="car-form-item">
          <ve-table
            :columns="columns"
            :table-data="historyLogs"
            :border-x="true"
            :border-y="true"
            :row-style-option="rowStyleOption"
          />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
  <el-row >
    <el-col :span="22" class="order-summary-detail">
      <el-scrollbar wrap-class="scrollar-wrapper" :style="{height:'400px'}">
        <referenceDetail></referenceDetail>
      </el-scrollbar>
    </el-col>
  </el-row>
</div>
</template>

<script>
import referenceDetail from "../loan/reference-detail-main"
export default {
  components:{
    //引入Order详情页面，在页面底部显示
    referenceDetail
  },
  name: "bank-loan-detail",
  data(){
    return {
      rules: {},
      id:'',
      appId:'',
      formData: {}, // 表单对象
      historyLogs:[],//历史日志
      bankLoanNumber:"",//银行支付编号
      orders:{},
      mainUser:{},
      approveInfo:{},
      banks:[],
      loanAmount:'',
      rowStyleOption: { // 表格样式
        stripe: true, // 斑马纹
        hoverHighlight: true, // hover高亮
        clickHighlight: true // 点击行高亮
      },
      columns: [
        {
          field: 'id',
          key: 'a',
          title: '编号',
          align: 'center',
          renderBodyCell: ({ row, column, rowIndex }, h) => {
            return (this.pageIndex - 1) * this.pageSize + rowIndex + 1
          }
        },
        { field: 'submitedBy', key: 'b', title: '提交人', align: 'center' },
        { field: 'message', key: 'c', title: '提交信息', align: 'left' },
        { field: 'submitedAt', key: 'd', title: '提交日期', align: 'left' },
        { field: 'auditStage', key: 'e', title: '审核节点', width: '' }
      ]
    }
  },
  created() {
    this.appId = sessionStorage.getItem('appId');
    this.id = this.$route.query.id;
    this.initDatabase(this.id);
    this.getBankList();
  },
  methods:{
    async saveData () {
      let params = {};

      params = this.formData;
      params.orderId = this.id;
      params.mainUser = this.mainUser.customerName;
      params.certType = this.mainUser.certType;
      params.certNum = this.mainUser.certNum;
      params.bank = this.mainUser.checkBank;
      params.department = this.orders.serviceGroup;
      params.serviceUser = this.orders.serviceUser;
      params.loanAmount = this.loanAmount;
      params.loanStatus = "order_loan_ensure";

      let data = await this.$http.post('/flow/bankLoan/update', params)
      console.log(data);
      if (data.code === 200) {
        this.$message({
          type: 'info',
          message: '提交成功！'
        })
        $nav.back();
      }

    },
    /**
       * 获取银行列表数据
       * @date 2021-05-18
       */
    async getBankList() {
      const param = { appId: await sessionStorage.getItem('appId') }
      const data = await this.$http.post('/auth/bankSetup/listAll/', param)
      if (data.code === 200) {
        this.banks = data.data
      }
    },
    async initDatabase(id){
      // this.banks = await commonService.getBankAll()
      const data = await this.$http.get('/flow/bankLoan/detail/' + id, {})
      if (data.code === 200) {
        this.orders = data.data.orders;
        this.mainUser = data.data.mainUser;
        this.approveInfo = data.data.approveInfo;
        if (data.data.bankLoan) {
          this.formData = data.data.bankLoan
        }
        this.loanAmount = this.approveInfo.loanAmount;
      }
    }
  }
}
</script>

<style scoped>
.part-box{
  padding: 20px 15px 0 0;
}
.operation-button{
  margin: 10px;
}
.right-btn{
  float: right;
  margin-right: 20px;
}
.el-scrollbar__wrap{
  overflow-x: hidden !important;
}
.order-summary-detail{
  border:1px solid grey;
  height: 400px;
  margin-left: 100px;
  margin-top: 30px;
}
</style>
